<template>
	<view>
		<view style="position: fixed; width: 100%; z-index: 9999;">
			<view class="header">
				<view id="back">
					<u-icon name="arrow-left" @click="clickBack" size="60rpx" v-if="back"></u-icon>
				</view>
				<view id="nav-title" v-if="scrollTop >= 20" @click="clickNav">
					<text>{{depart.deptName == undefined || depart.deptName == null ? '我的班级' : depart.deptName}}</text>
				</view>
				<u-button id="button" @click="toJoinClassPage" text="加入班级" plain></u-button>
				<u-line v-if="scrollTop >= 20" id="line"></u-line>
			</view>
		</view>
		<view v-if="departs.length == 0" style="padding-top: 60%;">
			<u-empty iconSize="320" textSize="36" iconColor="#3d5cff" textColor="#1f1f39" mode="data"></u-empty>
		</view>
		<view class="title">
			<view id="title-text">
				<text>{{depart.deptName}}</text>
			</view>
			<view id="title-icon">
				<u-icon size="60" v-if="departs.length > 1" @click="showPicker()" :name="isShowPicker ? 'arrow-up' : 'arrow-down'"></u-icon>
			</view>
		</view>
		<view class="classmates">
			<view id="cell" v-for="(item,index) in depart.members" :key="index">
				<u-avatar id="avatar" :src="item.avatar" size="128"></u-avatar>
				<text id="realname">{{item.realName}}</text>
				<u-icon id="gender" color="white" size="36" :name="getGender(item.gender)"
					:style="getGenderBgColor(item.gender)"></u-icon>
				<text id="birthday">{{getBirthday(item.birthday)}}</text>
			</view>
		</view>
		<u-picker :show="isShowPicker" @close="closePicker" @cancel="closePicker" @confirm="confirmPicker"
			:columns="options" itemHeight="78" confirmColor="#3d5cff" title="选择班级" :closeOnClickOverlay=true
			:defaultIndex="defaultIndex"></u-picker>
	</view>
</template>

<script>
	var _this = null;
	const api = require('api.js');
	export default {
		data() {
			return {
				scrollTop: 0,
				lastClickNav: 0,
				back: false,
				departs: [],
				departId: '',
				depart: {},
				defaultIndex: [0],
				options: [
					[]
				],
				isShowPicker: false,
			};
		},
		methods: {
			clickBack: function(e) {
				var pages = getCurrentPages();
				if (pages.length > 1) {
					uni.navigateBack({
						url: pages[pages.length - 2].url
					})
				}
			},
			clickNav: function() {
				var now = new Date().getTime();
				var diff = now - _this.lastClickNav;
				_this.lastClickNav = now;
				if (diff < 300) {
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 100
					})
				}
			},
			toJoinClassPage: function() {
				uni.navigateTo({
					url: '../myclass/joinclass'
				});
			},
			onPageScroll(e) {
				_this.scrollTop = e.scrollTop;
			},
			getMyDeparts: function() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				api.getSync('/api/depart/myDepart', {}, res => {
					if (res.code == 200) {
						_this.departs = res.data;
						if (_this.departs.length > 0) {
							_this.departId = _this.departs[0].id;
							_this.getDepart(_this.departId);
							if (_this.departs.length > 1) {
								var arr = [];
								_this.departs.forEach(e => {
									arr.push(e.deptName);
								});
								_this.options = [arr];
							}
						}
						uni.stopPullDownRefresh();
					}
				}, err => {});
			},
			getDepart: function(id) {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				api.getSync('/api/depart/detail/' + id, {}, res => {
					if (res.code == 200) {
						_this.depart = res.data;
						uni.hideLoading();
					}
				}, err => {});
			},
			getGender: function(e) {
				return e == 2 ? 'woman' : 'man';
			},
			getGenderBgColor: function(e) {
				return e == 2 ? {
					'background': '#ff557f'
				} : {
					'background': '#4ca9ff'
				};
			},
			getBirthday: function(e) {
				return (e == undefined ||
					e == null ||
					e == '') ? '保密' : e;
			},
			showPicker: function() {
				_this.isShowPicker = true;
			},
			closePicker: function() {
				_this.isShowPicker = false;
			},
			confirmPicker: function(e) {
				_this.closePicker();
				_this.departId = _this.departs[e.indexs[0]].id;
				_this.getDepart(_this.departId);
			},
		},
		onLoad() {
			_this = this;
			_this.back = getCurrentPages().length > 1;
			_this.getMyDeparts();
		},
		onPullDownRefresh() {
			_this.getMyDeparts();
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		height: calc(var(--status-bar-height) + 86rpx);
		position: relative;
		background: white;

		#back {
			position: absolute;
			padding-top: calc(var(--status-bar-height) + 18rpx);
			padding-left: 12rpx;
			z-index: 99999;
		}

		#nav-title {
			position: absolute;
			padding-top: calc(var(--status-bar-height) + 20rpx);
			padding-left: 305rpx;
			font-weight: bold;
			font-size: 36rpx;
			z-index: 99;
		}
		
		#button {
			position: absolute;
			background: #3d5cff;
			width: 150rpx;
			top: calc(var(--status-bar-height) + 12rpx);
			right: 16rpx;
			height: 70rpx;
			border-radius: 18rpx;
			color: white;
		}

		#line {
			position: absolute;
			top: calc(var(--status-bar-height) + 85rpx);
		}
	}

	.title {
		height: 210rpx;
		display: flex;
		flex-direction: row;
		padding-left: 48rpx;
		
		#title-text {
			padding-top: calc(var(--status-bar-height) + 120rpx);
			color: #1f1f39;
			font-size: 64rpx;
			font-weight: 600;
			height: 140rpx;
		}
		
		#title-icon {
			padding-left: 20rpx;
			padding-top: calc(var(--status-bar-height) + 130rpx);
		}
	}

	.classmates {
		padding-top: calc(var(--status-bar-height));
		
		#cell {
			position: relative;
			width: 670rpx;
			height: 192rpx;
			margin-left: 40rpx;
			margin-bottom: 20rpx;
			box-shadow: 0px 8px 12px rgba(184, 184, 210, 0.2);
			border-radius: 25rpx;

			#avatar {
				position: absolute;
				margin-top: 36rpx;
				margin-left: 36rpx;
			}

			#realname {
				position: absolute;
				top: 34rpx;
				left: 200rpx;
				color: rgba(31, 31, 57, 1);
				font-size: 34rpx;
				font-weight: bold;
				font-family: 'YouYuan';
			}

			#gender {
				position: absolute;
				top: 84rpx;
				left: 200rpx;
				background: #299bff;
				border-radius: 12rpx;
			}

			#birthday {
				position: absolute;
				top: 122rpx;
				left: 200rpx;
				font-weight: 400;
				font-family: 'YouYuan';
			}
		}
	}
</style>
